$product-list-color: #6B6C70;
$product-list-color-2: #FD7B7B;
$product-list-color-3: #666;
$product-list-border-color: rgb(238, 238, 238);
$product-list-card:(
    100: rgba(247,247,247,1),
    200: rgba(238,238,238,1),
    300: rgba(214,214,214,1),
    400: rgba(216,211,211,1),
    // 100: rgba(252,125,70,1),
    // 200: rgba(189,96,247,1),
    // 300: rgba(85,215,45,1),
    // 400: rgba(253,198,67,1),
);

$product-list-transition-duration: 300ms;
$product-list-transition-timing-function: linear;
.product-list-box{
    width: 100%;
    .product-list-ul{
        width: 100%;
        &::after{
            display: block;
            content: '';
            visibility: hidden;
            clear: both;
            font-size: 0;
            line-height: 0;
        }
        .product-item-box{
            float: left;
            width: 25%;
            padding: .1rem;
            &.product-list__edit{
                .product-item__body{
                    width: 100%;
                    position: relative;
                    border: .01rem solid $product-list-color-2;
                }
                .product-item__placeholder-box{
                    height: .5rem;
                    width: 100%;
                    padding: 20% 0;
                    box-sizing: content-box;
                }
                ::v-deep{
                    .ask-empty-text-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 0;
                    }
                    .ask-empty-text-icon{
                        font-size: .4rem;
                        height: .4rem;
                        font-weight: bold;
                        color: $product-list-color-2;
                    }
                    .ask-empty-text{
                        color: $product-list-color;
                        font-size: .2rem;
                    }
                }
            }
            &:nth-child(4n+1){
                ::v-deep{
                    .product-item__body{
                        background: map-get($product-list-card, 100);
                    }
                }
            }
            &:nth-child(4n+2){
                ::v-deep{
                    .product-item__body{
                        background: map-get($product-list-card, 200);
                    }
                }
            }
            &:nth-child(4n+3){
                ::v-deep{
                    .product-item__body{
                        background: map-get($product-list-card, 300);
                    }
                }
            }
            &:nth-child(4n+4){
                ::v-deep{
                    .product-item__body{
                        background: map-get($product-list-card, 400);
                    }
                }
            }
            ::v-deep{
                .product-item__body{
                    width: 100%;
                    border: 1px solid $product-list-border-color;
                    border-radius: .08rem;
                    overflow: hidden;
                    padding: .2rem 0 .1rem ;
                    cursor: pointer;
                    box-shadow: 0px 7px 10px rgba(216, 216, 216, 0.25);
                    transition-property: transform, box-shadow;
                    transition-duration: $product-list-transition-duration;
                    transition-timing-function: $product-list-transition-timing-function;
                    &:hover{
                        transform: scale(1.02);
                        box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.1), 0 0 6px 1px rgba(0, 0, 0, 0.1);
                    }
                }
                .product-item-cover{
                    width: 100%;
                    padding: 20% 0;
                    position: relative;
                    .ask-image-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 0;
                    }
                }
                .product-item-desc{
                    height: 1rem;
                    font-size: .14rem;
                    color: rgba($product-list-color,.8);
                    padding: .1rem;
                    line-height: 1.4;
                    word-break: break-all;
                    overflow: hidden;
                }
                .product-item-info{
                    width: 100%;
                    height: .34rem;
                    // box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.08), 0 0 6px 1px rgba(0, 0, 0, 0.08);
                    position: relative;
                    z-index: 2;
                    @include flexLayout(flex,center,center);
                    .product-item__text{
                        flex: 1;
                        font-size: .16rem;
                        color: $product-list-color-3;
                        text-align: center;
                        padding: 0 .16rem;
                        @include textEllipsis(1);
                        &.small{
                            font-size: .12rem;
                        }
                    }
                    .product-item__icon{
                        flex: 0 0 auto;
                        padding: 0 .1rem;
                    }
                }
            }
        }
    }
}